<script>
export default {
  name: "User",
  data() {
    return {
      //分页
      pageData: {
        page: 1,
        size: 2,
        userName: null,
        userAccount: null
      },
      total: 0,//分页总行数用于分页计算
      //表格数据
      tableData: [],
      dialogVisible: false,//窗口的打开或关闭用到
      addData:{
        userId:null,
        userAccount: null,
        userPassword:null,
        userPhone:null,
        userStatus:null,
        userName:null,
        userImg:null
      },//用于新增的数据绑定
      imageUrl: '',//头像回显示
      //弹窗表头的标题
      tableTitle:"新增",
      options: [{
        value: '选项1',
        label: '学校'
      }, {
        value: '选项2',
        label: '商场'
      }, {
        value: '选项3',
        label: '火车站'
      }, {
        value: '选项4',
        label: '街道处'
      }, {
        value: '选项5',
        label: '小区'
      }],
      value: ''
    }
  },
  methods: {
    //获取用户信息
    getUserList() {
      this.$http({url: "user/selectPage", method: "GET", params: this.pageData}).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    //分页的两个方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //重新加载表格数据
      this.pageData.size = val;
      //重新调用数据加载方法
      this.getUserList()//用于改变没有的条数
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageData.page = val;
      //重新调用数据加载方法
      this.getUserList()//改变当前页面数
    },
    //新增弹窗
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //打开新增窗口
    addShow(res) {

      if (res){
        //修改
        this.tableTitle="修改"
        //将要修改的数据显示
        this.addData.userId=res.userId
        this.addData.userName=res.userName
        this.addData.userPassword=res.userPassword
        this.addData.userAccount=res.userAccount
        this.addData.userImg=res.userImg
        this.addData.userStatus=res.userStatus
        //头像显示
        this.imageUrl=res.userImg
      }else{
        //新增
        this.tableTitle="新增"
        this.addData.userId=null
        this.addData.userName=null
        this.addData.userPassword=null
        this.addData.userAccount=null
        this.addData.userImg=null
        this.addData.userStatus=null
      }
      this.dialogVisible = true
    },
    //图片上传
    handleAvatarSuccess(res, file) {
      console.log(res)
      //图头像回显
      this.imageUrl = "http://localhost:8888"+res.data;
      //把图片路径保存到数据库
      this.addData.userImg = "http://localhost:8888"+res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    add() {
      if (this.tableTitle == "新增") {
        this.$http({url: "/user/add", method: "post", data: this.addData}).then(res => {
          //提示
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          //先将数据清空 重置表单
          this.addData.userImg = null
          this.addData.userPassword = null
          this.addData.userAccount = null
          this.addData.userName = null
          this.addData.userStatus = null
          //图片清空
          this.imageUrl = ""
          //关闭弹窗
          this.dialogVisible = false
          //数据重新加载
          this.getUserList()
        })
      } else {
        //修改
        this.$http({url: "/user/updata", method: "post", data: this.addData}).then(res => {
          //提示
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          //先将数据清空 重置表单
          this.addData.userImg = null
          this.addData.userPassword = null
          this.addData.userAccount = null
          this.addData.userName = null
          this.addData.userStatus = null
          //图片清空
          this.imageUrl = ""
          //关闭弹窗
          this.dialogVisible = false
          //数据重新加载
          this.getUserList()
        })
      }
    },
    delteUser(row){
      this.$http({url: "/user/deleteUser", method: "DELETE", params:{"userId":row.userId}}).then(res => {
        if (res.data.code==200){
          this.$message({
            message: res.data.message,
            type: 'success'
        });
          //刷新表格
          this.getUserList();
      }else {
          this.$message.error("删除失败")
        }
    })
 }
  },
  mounted() {//与method是同一级别的
    //组件加载触发该方法
    //发送请求获取数据
    this.getUserList();
  }
}
</script>


<template>
  <div class="background-container">
    <!--面包屑-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/hello' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--查询列表-->
    <el-row style="margin-top: 20px;">
      <el-col :span="4">
        <el-input
          placeholder="请输入用户名称"
          prefix-icon="el-icon-search"
          v-model="pageData.userName">
        </el-input>
      </el-col>
      <el-col :span="4" style="margin-left: 20px">
        <el-input  prefix-icon="el-icon-search" v-model="pageData.userAccount" placeholder="请输入账号"></el-input>
      </el-col>
      <el-col :span="4" style="margin-left: 20px">
        <el-select  prefix-icon="el-icon-location-outline" v-model="value" placeholder="请选择区域">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="4" style="margin-left: 20px">
        <el-time-select prefix-icon="el-icon-timer"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30'
          }"
          placeholder="选择时间">
        </el-time-select>
      </el-col>

      <el-col :span="4" style="margin-left: 20px">
        <el-button type="primary" @click="getUserList">查询</el-button>
        <el-button type="success" @click="addShow()">新增</el-button>
<!--   aadshow把提示框作为一个展示>-->
      </el-col>

    </el-row>

    <!--查询数据-->
    <el-table
      :data="tableData"
      style="width: 100%;margin-top: 20px" >
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userAccount"
        label="账号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userPassword"
        label="密码">
      </el-table-column>
      <el-table-column
        prop="userEmail"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="userImg"
        label="头像">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="addShow(scope.row)" type="text" size="small">修改</el-button>
          <el-button type="text" @click="delteUser(scope.row)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageData.page"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pageData.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <el-dialog
      :title="tableTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="addform" :model="addData" label-width="80px">
        <el-form-item label="用户头像">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8888/file/updata"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="addData.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户账号">
          <el-input v-model="addData.userAccount"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input v-model="addData.userPassword"></el-input>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-select v-model="addData.userStatus" placeholder="请选择状态">
            <el-option label="管理员" value="0"></el-option>
            <el-option label="普通用户" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="add">提 交</el-button>
  </span>
    </el-dialog>
  </div>


</template>



<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.background-container {
  background-image: url('../assets/user.jpg'); /* 替换为你的图片路径 */
  background-size: cover; /* 拉伸填充整个容器 */
  background-repeat: no-repeat;
  min-height: 100vh; /* 保证容器高度至少为视口高度 */
  padding: 20px; /* 可选：避免内容贴边 */
  box-sizing: border-box; /* 防止内边距影响宽度 */
}

/* 优化表格内容在背景上的可读性 */
.el-table {
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
}
</style>
